<template>
  <div class="login">
    <div class="login-box">
      <img class="loginLogo" src="../assets/logo.png" alt />
      <!-- 表单 -->
      <el-form status-icon ref="loginForm" :model="loginForm" :rules="loginRules">
        <el-form-item prop="username">
          <el-input
            prefix-icon="el-icon-user-solid"
            type="text"
            v-model="loginForm.username"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            prefix-icon="el-icon-lock"
            type="password"
            v-model="loginForm.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="submitForm" type="primary">提 交</el-button>
          <el-button @click="resetForm">重 置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- <el-button type="primary">主要按钮</el-button> -->
  </div>
</template>
           
<script>
export default {
  name: "login",
  data() {
    // 自定义用户名非空的校验规则
    var validateUserName = (rule, value, callback) => {
      if (value.trim() == "") {
        callback(new Error("请输入用户名"));
      } else {
        callback();
      }
    };
    var validatePassWord = (rule, value, callback) => {
      if (value.trim() == "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    return {
      loginForm: {
        username: "admin",
        password: "123456"
      },
      // 表单检验
      loginRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { validator: validateUserName, trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { validator: validatePassWord, trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    // 重置
    resetForm() {
      this.$refs.loginForm.resetFields();
    },
    // 登录
    submitForm() {
      if (this.loginForm.username == "" || this.loginForm.password == "") {
        //  判断是否输入
        return this.$message({
          message: "请输入用户名或密码",
          type: "warning",
          duration: 1000
        });
      } else {
        // 发送请求
        this.$http.post("login", this.loginForm).then(res => {
          if (res.status != 200)
            return this.$message({
              message: res.data.meta.msg || "用户名或密码错误",
              type: "warning",
              duration: 1000
            });
          // 保存token值
          localStorage.setItem("token_ds", res.data.data.token);
          // 提示登录消息---消息结束后--跳转页面
          this.$message({
            message: res.data.meta.msg || "登录成功",
            type: "success",
            duration: 1000,
            // 跳转首页
            onClose: () => {
              this.$router.push("/home");
            }
          });
        });
      }
    }
  }
};
</script>
<style scoped lang='less'>
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background: url("../assets/img/login_bg.jpg") no-repeat center / cover;
  &-box {
    //less中，$代表父级
    width: 450px;
    height: 300px;
    border-radius: 8px;
    background-color: rgba(235, 228, 228, 0.596);
    margin-top: -20px;
    padding: 0 30px;
    .loginLogo {
      width: 130px;
      height: 130px;
      border-radius: 50%;
      margin: -45px auto 20px;
      border: 10px solid #eee;
      box-shadow: 0px 0px 10px #eee;
    }
    // deep 为了突破scoped的限制
    /deep/.el-input__inner {
      background-color: rgba(230, 255, 255, 0.596);
    }
    /deep/.el-input__icon {
      font-size: 16px;
      color: #586279;
    }
    .el-button {
      width: 190px;
    }
  }
}
</style>



